<!--
 * @Descripttion: 
 * @version: 
 * @Author: gonghong
 * @Date: 2023-07-05 15:37:44
-->
<script setup>

const props=defineProps({
    title: {
        type: String,
        default: '',
    },
    rightText:{
        type: String,
        default: '',
    },
    showArrow:{
        type: Boolean,
        default:()=>{
            return false
        }
    },
    required:{
        type: Boolean,
        default:()=>{
            return false
        }
    },
})
</script>
<template>
    <view class="cell-item">
        <view class="cell-item-title">
            <text>{{ title }}</text>
            <text class="requiredStyle" v-if="required">*</text>
        </view>
        <view class="cell-item-body">
            <view style="flex:1;">
                <slot>
                    <text class="rightText">{{ rightText }}</text>
                </slot>
            </view>
            <uni-icons type="forward" size="24" color="#e5e5e5" v-if="showArrow"></uni-icons>
        </view>
    </view>
</template>
<style lang="scss" scoped>
.cell-item{
    height: 30px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 12px 15px;
}
.cell-item-title{
    font-size: 14px;
    color: #3b4144;
    width:70px;
}
.cell-item-body{
    flex:1;
    display: flex;
    align-items: center;
}
.requiredStyle{
    margin-left: 5px;
    color: $uni-color-error;
}
.rightText{
    font-size: 14px;
    color: #333;
}
</style>